<template>
  <div class="detail-box">
    <!-- <van-nav-bar
      title="群详情"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickScreen(list.id)"
    >
      <van-icon name="close" slot="right" class="screen-btn" />
    </van-nav-bar> -->

    <div class="group-item" :ref='list.id'>
      <van-row class="group-item-title">
        <van-col span="12">
          <div class="group-item-title-content">
            <img class="group-item-title-img" :src="list.userImg" alt="">
            <div class="group-item-container">
              <p class="group-item-container-top">{{ list.userName }}</p>
              <p class="group-item-container-bottom">level  36</p>
            </div>
          </div>
          <p class="num-txt">联系电话：{{ list.phoneNum }}</p>
          <p class="num-txt">微信号：{{ list.wechatNum }}</p>
        </van-col>
        <van-col span="12">
          <div value="" class="qr-container c-padding-0">
            <canvas width="61" height="61" class="qr-img" ref="qrCanvas"></canvas>
            <p class="qr-txt">微信二维码</p>
          </div>
        </van-col>
      </van-row>

      <van-row class="group-item-address">
        <p class="group-item-title-price">{{ list.price }} 多多币</p>
        <p class="group-detail-title">{{ list.groupName }}</p>
        <p class="group-detail-txt">{{ list.groupDetail }}</p>
        <van-col span="16" class="group-item-address-text">
          <span>
            <van-icon name="location" style="top:1px;margin-right:5px;"/>
            <span>来自: {{ list.address }}</span>
          </span>
          <span>{{ list.userDate }}</span>
        </van-col>
      </van-row>

      <van-row class="group-item-purchase">
        <van-col span="12" class="group-item-purchase-img">
          <template v-for="(imgItem, imgIndex) in list.purchaseUserImg">
            <img :src="imgItem" alt="">
          </template>
        </van-col>
        <van-col span="2" class="group-item-purchase-dot">
          <span
            :class="list.purchaseUserImg.length > 8 ? '': 'opacity-0'"
            style="color:#B5B5B5;font-weight:bold;"
            >
            . . .
          </span>
        </van-col>
        <van-col span="9" offset="1" class="group-item-purchase-text">
          已有 <span style="color:#00BE0C;">{{ list.purchaseUserImg.length }}</span> 人购买
        </van-col>
      </van-row>
    </div>

    <div class="group-bottom">
      <router-view class=""></router-view>
    </div>

    <!-- 屏蔽弹窗 -->
    <van-dialog
      v-model="isScreenShow"
      :show-confirm-button="false"
      show-cancel-button
    >
      <van-button
        size="large"
        @click="shieldPerson"
        class="shield-btn"
      >
        屏蔽该人
      </van-button>
      <van-button
        size="large"
        @click="shieldMessage"
        class="shield-btn"
      >
        屏蔽该条信息
      </van-button>
    </van-dialog>


    <!-- 更多信息 - 支付 - 弹窗 -->
    <van-dialog
      v-model="isInfoDialogShow"
      show-cancel-button
      confirm-button-text="支付"
      @confirm="gotoPay"
      class="dialog-info"
    >
      <div class="dialog-info-txt">
        <p class="dialog-info-title">立即加群</p>
        <p class="dialog-info-content">
          支付
          <span class="dialog-info-price">50多多币</span>
          即可查看群完整信息，您的账户剩余
          <span class="dialog-info-balance">100多多币</span>，
          是否支付？
        </p>
      </div>
    </van-dialog>

    <!-- 支付成功 -->
    <van-popup v-model="popShowSuccess" position="right" class="popup-success">
      <van-nav-bar
        title="支付成功"
      />
      <p class="pop-success-txt">
        <span class="pop-success-left">已支付</span>
        <span class="pop-success-right">1元</span>
      </p>
      <van-button
        type="default"
        class="popup-success-btn"
        @click="onClickCheckOrder"
      >
        查看订单
      </van-button>
    </van-popup>
  </div>
</template>

<script>
  import {
    NavBar,
    Cell,
    CellGroup,
    Field,
    Button,
    Row,
    Col,
    Search,
    Tabbar,
    TabbarItem,
    List,
    Icon,
    Popup,
    Dialog
  } from 'vant';
  import { gaussBlur } from '../../../static/js/gauss-blur.js';
  export default {
    components: {
      [NavBar.name]: NavBar,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Field.name]: Field,
      [Button.name]: Button,
      [Row.name]: Row,
      [Col.name]: Col,
      [Search.name]: Search,
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
      [List.name]: List,
      [Icon.name]: Icon,
      [Popup.name]: Popup,
      [Dialog.name]: Dialog,
    },
    data() {
      return {
        searchData: '',
        loading: false,
        finished: false,
        isScreenShow: false,
        isInfoDialogShow: false,
        popShowSuccess: false,
        // 点击屏蔽的消息的ID
        chosenId: 0,
        list: {
          id: '0',
          isBuy: false,
          userImg: '',
          userName: '用户昵称',
          phoneNum: '130****000',
          wechatNum: 'eh****',
          userDate: '2018/6/6 12:20',
          price: '50',
          groupName: '这里是群名称',
          groupDetail: 'Nike、AirJordan、Adidas、Under Armour、Reebok、New BalancePuma、Asics、Mizuno 官网代购。全网最低价~包关税~正品保证，款式与官网同步更新~详情关注群公告。',
          label: ['标签0', '标签1', '标签2', '标签3', '标签1', '标签2', '标签3'],
          purchaseUserImg: ['','','','','','','','','','','',''],
          address: '大宁德必易园',
          qcImg: 'static/img/login.png',
          groupMember: 'static/img/login.png',
          groupMemberNumber: 20,
          PublisherIdentity: '群主',
          groupRequire: '群主审核',
          chatRecordShot: [
            'static/img/login.png',
            'static/img/login.png',
            'static/img/login.png',
            'static/img/login.png',
            'static/img/login.png',
          ],

        },
      }
    },
    mounted() {
      // 首页传过来的消息ID
      // this.$route.query.id

      // 获取订单详情
      this.$axios({
        method: "POST",
        url: url_g + ''
      }).then((res) => {
        // 还有数据
        if(res.success) {
          // 拼接数组
          // this.list.push.apply(this.list, res.data);
        }
        // 没有数据
        else {
        }
      }).catch((e)=>{
        this.$dialog.alert({
          message: '您输入的信息有误或网络有问题，请检查重试！'
        });
      });

      // 二维码模糊
      let $this = this;
      let qrCanvas = this.$refs.qrCanvas;
      let setCanvas = qrCanvas.getContext('2d');
      var yImg = new Image();
      yImg.src = this.list.qcImg;
      yImg.onload = function() {
        setCanvas.drawImage(yImg, 0, 0, 61, 61);
        // 模糊操作
        if(!$this.list.isBuy) {
          let data = setCanvas.getImageData(0, 0, 61, 61);
          let emptyData = gaussBlur(data);
          setCanvas.putImageData(emptyData, 0, 0);
        }
      }
      // 二维码模糊  ---- end
    },
    methods: {
      onClickLeft() {
        this.$router.go(-1);
      },
      onClickScreen(id) {
        this.isScreenShow = !this.isScreenShow;
        this.chosenId = id;
      },
      // 屏蔽个人
      shieldPerson() {
        this.isScreenShow = !this.isScreenShow;
        Dialog.confirm({
          title: '提示',
          message: '屏蔽后将不再显示该用户发布的任何群信息，是否确认？'
        }).then(() => {
          // on confirm
          console.log('选择屏蔽个人');
          console.log('选择屏蔽消息的ID： ' + this.chosenId);
        }).catch(() => {
          // on cancel
        });
      },
      // 屏蔽消息
      shieldMessage() {
        this.isScreenShow = !this.isScreenShow;
        Dialog.confirm({
          title: '提示',
          message: '屏蔽后将不再显示该条信息，是否确认？'
        }).then(() => {
          // on confirm
          console.log('选择屏蔽消息');
          console.log('选择屏蔽消息的ID： ' + this.chosenId);
        }).catch(() => {
          // on cancel
        });
      },
      onClickMoreInfo() {
        // 点击  更多信息  按钮
        this.isInfoDialogShow = !this.isInfoDialogShow;
      },
      gotoPay() {
        // 支付
        this.popShowSuccess = !this.popShowSuccess;
      },
      onClickCheckOrder() {
        // 点击查看订单
        this.popShowSuccess = !this.popShowSuccess;
      }
    }
  }
</script>

<style scoped="scoped">
.screen-btn {
  font-size: 20px;
  color: #101010;
}
.opacity-0 {
  opacity: 0;
}
.group-item {
  /*border-bottom: 1px solid #ccc;*/
}
.group-item-title {
  padding: 10px 18px;
  margin-top: 10px;
  border-bottom: 1px solid #e5e5e5;
}
.group-item-title-img {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #ccc;
  border-radius: 5px;
}
.group-item-title-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 42px;
}
.group-item-title-content-bottom {
  float: right;
  font-size: 13px;
  color: #888888;
  line-height: 30px;
}
.group-item-title-price {
  font-size:15px;
  line-height: 30px;
}
.group-detail-title {
  line-height: 30px;
  font-size:12px;
}
.group-detail-txt {
  color: #B5B5B5;
  font-size: 12px;
  line-height: 16px;
  height: 48px;
  overflow : hidden;
  text-overflow: ellipsis;
  display: box;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.group-item-address-text {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 30px;
  font-size:12px;
  color: #00BE0C;
  line-height: 30px;
}
.label-container {
  height: 26px;
  overflow: hidden;
}
.label-container-item:first-of-type {
  margin-left: 0;
}
.label-container-item {
  display: inline-block;
  width: 54px;
  height: 26px;
  text-align: center;
  font-size: 12px;
  line-height: 26px;
  border-radius: 10px;
  background-color: #ccc;
  margin-left: 10px;
}
.label-container-dot {
  line-height: 18px;
}
.group-item-purchase {
  padding: 10px 18px;
  height: 30px;
  margin-top: 10px;
}
.group-item-purchase-img {
  height: 30px;
  overflow: hidden;
}
.group-item-purchase-img img:first-of-type {
  margin: 0;
}
.group-item-purchase-img img {
  display: inline-block;
  height: 28px;
  width: 28px;
  margin-left: -10px;
  background-color: #666;
  border-radius: 50%;
  border: 1px solid #ccc;
}
.group-item-purchase-text {
  line-height: 30px;
  text-align: right;
  font-size: 12px;
  color: #B5B5B5;
}
.group-item-address {
  padding: 10px 18px;
  margin: 15px 0 0;
  font-size: 13px;
  line-height: 30px;
  border-bottom: 1px solid #e5e5e5;
}
.group-item-address-icon {
  font-size: 24px;
  text-align: right;
}
.shield-btn {
  color: red;
}
.dialog-info {
  width: 80%;
}
.dialog-info-txt {
  padding: 20px;
}
.dialog-info-title {
  font-size: 16px;
  line-height: 30px;
  margin-bottom: 10px;
  text-align: center;
  color: #00BE0C;
}
.dialog-info-content {
  font-size: 12px;
  line-height: 18px;
}
.dialog-info-price {
  color: #00BE0C;
}
.dialog-info-balance {
  color: #FF006C;
}
.van-dialog__cancel {
  background-color: #B5B5B5;
}
.popup-success {
  width: 100%;
  height: 100%;
}
.popup-success-btn {
  display: block;
  width: 80%;
  margin: 60px auto;
  background-color: #000;
  color: #fff;
}
.pop-success-txt {
  margin-top: 50px;
  text-align: center;
}
.pop-success-left {
  margin-right: 30px;
}
.pop-success-right {
  color: red;
}
.group-bottom {
  margin-top: 10px;
}
.qr-container {
  float: right;
  text-align: center;
  padding: 0;
  border: 0;
}
.qr-txt {
  color: #B5B5B5;
  margin-top: 20px;
  font-size: 12px;
}
.qr-container.van-cell:not(:last-child)::after {
  border: 0;
}
.num-txt {
  line-height: 24px;
  color: #B5B5B5;
  font-size: 12px;
}
.num-txt:first-of-type {
  margin-top: 16px;
}
.group-item-container {
  margin-left: 12px;
  font-size:15px;
}
.group-item-container-bottom {
  color: #B5B5B5;
}
</style>